<style lang="scss" scoped>
    .fd-loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1200;
        color: #337ab7;
        .inner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    }
</style>
<template>
    <div class="fd-loading" v-if="isLoadingActive">
        <div class="inner">
            <i class="fa fa-cog fa-spin fa-fw"></i> {{ loadingText }}
        </div>
    </div>
</template>
<script>
    import { mapGetters } from 'vuex'

    export default {
        name: 'Loading',
        computed: {
            ...mapGetters({
                isLoadingActive: 'isLoadingActive',
                loadingText: 'loadingText'
            })
        }
    }
</script>
